<template>
    <div>
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>知识星球</el-breadcrumb-item>
        <el-breadcrumb-item>星球管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>


    <el-row :gutter="20">
        <el-col :span="8">
            <el-input placeholder="请输入文章名称" clearable v-model="articleTitle" @clear="listArticle">
                <el-button slot="append" icon="el-icon-search" @click="listArticle"></el-button>
            </el-input>
        </el-col>
        <el-col :span="4">
            <el-button type="primary" @click="addDialogVisible=true">添加新文章</el-button>
        </el-col>
    </el-row>


    <el-table
            :data="articleList"
            stripe
            style="width: 100%">
        <el-table-column
                prop="articleId"
                label="#"
                width="30">
        </el-table-column>
        <el-table-column
                prop="articleTitle"
                label="文章标题"
                width="180">
        </el-table-column>
        <el-table-column
                prop="articleLabel"
                label="文章标签"
                width="90">
        </el-table-column>
        <el-table-column
        prop="createTime"
        label="创建时间"
        width="180">
        </el-table-column>

        <el-table-column
                label="内容"
        >
            <template slot-scope="props">
                <el-popover
                        placement="bottom"
                        title="文章内容"
                        width="200"
                        trigger="hover"
                >
                    <text>{{ props.row.articleContent }}</text>
                    <el-button slot="reference">查看全文</el-button>
                </el-popover>
            </template>
        </el-table-column>

        <el-table-column label="文章类型" width="90">
            <template slot-scope="sc">{{sc.row.artTypeId==1?'汪星球':'喵星球'}}</template>
        </el-table-column>
        <el-table-column
                prop="viewNum"
                label="文章浏览量"
                width="60">
        </el-table-column>
        <el-table-column
                prop="colCount"
                label="文章收藏量"
                width="60">
        </el-table-column>
        <el-table-column label="操作" >
            <template slot-scope="scope">
            <el-button type="warning" size="mini" @click="showEditDiagoue(scope.row)">修改</el-button>
            <el-button type="danger" size="mini" @click="removeArticleById(scope.row.articleId)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[2, 4 , 8, 16]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total=pages>
        </el-pagination>
    </el-card>
        <el-dialog
                title="添加新文章"
                :visible.sync="addDialogVisible"
                width="70%"
                :before-close="handleClose">
            <el-form ref="addform" :model="addArticle" label-width="80px" :rules="addRules">
                <el-form-item label="文章名称" prop="articleTitle" >
                    <el-input v-model="addArticle.articleTitle"></el-input>
                </el-form-item>
                <el-form-item label="文章板块" prop="artTypeId">
                    <el-select v-model="addArticle.artTypeId" placeholder="喵还是汪？">
                        <el-option label="喵星球" :value="1"></el-option>
                        <el-option label="汪星球" :value="2"></el-option>
                    </el-select>
                </el-form-item>
                    <el-form-item label="文章标签" prop="articleLabel">
                        <el-input v-model="addArticle.articleLabel"></el-input>
                    </el-form-item>
                    <el-form-item
                            v-infinite-scroll="load"
                            style="overflow:auto"
                            class="form-item-content"
                            prop="articleContent"
                            label="公告内容">
                        <quill-editor ref="myQuillEditor" v-model="addArticle.articleContent" class="editor" :options="editorOption" />
                    </el-form-item>
                <el-form-item label="可读" prop="articleStatus">
                    <el-select v-model="addArticle.articleStatus" >
                        <el-option label="不可读" :value="0"></el-option>
                        <el-option label="可读" :value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                <el-button @click="addDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm()">确 定</el-button>
                </el-form-item>
                <el-upload
                        class="avatar-uploader-img"
                        :action="imgUrl"
                        name="contentImgs"
                        :headers="header"
                        :show-file-list="false"
                        :on-success="uploadImgSuccess"
                        :before-upload="beforeUploadImg"
                        :on-error="uploadImgError"
                        :data="{'pathName':''}"
                />
                <el-upload
                        class="avatar-uploader-video"
                        :action="vidUrl"
                        :show-file-list="false"
                        :on-success="uploadVideoSuccess"
                        :before-upload="beforeUploadVideo"
                        :on-error="uploadVideoError"
                        :data="{'pathName':''}"
                />
            </el-form>
        </el-dialog>


        <el-dialog
                title="修改文章"
                :visible.sync="modDialogVisible"
                width="70%"
                :before-close="handleClose">
            <el-form ref="modform" :model="modArticle" label-width="80px" :rules="modRules">
                <el-form-item label="文章名称" prop="articleTitle">
                    <el-input v-model="modArticle.articleTitle"></el-input>
                </el-form-item>
                <el-form-item label="文章板块" prop="artTypeId">
                    <el-select v-model="modArticle.artTypeId" placeholder="喵还是汪？">
                        <el-option label="汪星球" :value="1"></el-option>
                        <el-option label="喵星球" :value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="文章标签" prop="articleLabel">
                    <el-input v-model="modArticle.articleLabel"></el-input>
                </el-form-item>
                <el-form-item
                        v-infinite-scroll="load"
                        style="overflow:auto"
                        class="form-item-content"
                        prop="content"
                        label="公告内容">
                    <quill-editor ref="myQuillEditor" v-model="modArticle.articleContent" class="editor" :options="editorOption" />
                </el-form-item>
                <el-form-item label="可读" prop="articleStatus">
                    <el-select v-model="modArticle.articleStatus" >
                        <el-option label="不可读" :value="0"></el-option>
                        <el-option label="可读" :value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="modDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitmodForm()">确 定</el-button>
                </el-form-item>
            </el-form>
            <el-upload
                    class="avatar-uploader-img"
                    :action="imgUrl"
                    name="contentImgs"
                    :headers="header"
                    :show-file-list="false"
                    :on-success="uploadImgSuccess"
                    :before-upload="beforeUploadImg"
                    :on-error="uploadImgError"
                    :data="{'pathName':''}"
            />
            <el-upload
                    class="avatar-uploader-video"
                    :action="vidUrl"
                    :show-file-list="false"
                    :on-success="uploadVideoSuccess"
                    :before-upload="beforeUploadVideo"
                    :on-error="uploadVideoError"
                    :data="{'pathName':''}"
            />
        </el-dialog>
    </div>
</template>

<script>
    const toolbarOptions = [
        ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
        ['blockquote', 'code-block'], // 引用  代码块
        [{ header: 1 }, { header: 2 }], // 1、2 级标题
        [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
        [{ script: 'sub' }, { script: 'super' }], // 上标/下标
        [{ indent: '-1' }, { indent: '+1' }], // 缩进
        // [{'direction': 'rtl'}],                         // 文本方向
        [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
        [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
        [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
        [{ font: [] }], // 字体种类
        [{ align: [] }], // 对齐方式
        ['clean'], // 清除文本格式
        // ['link', 'image', 'video'] // 链接、图片、视频
        ['link', 'image', 'video'] // 链接、图片
    ]

    export default {
        name: "IntelligencePlanet",
        data(){
           return{
               imgUrl:this.$baseUrl+"/article/uploadimgs",
               vidUrl:this.$baseUrl+"/article/uploadvideos",
               articleList:[],
               articleTitle:"",
               pageNum:1,
               pageSize:2,
               pages:0,
               header:{token: sessionStorage.token},
               addArticle:{
                   articleTitle:"",
                   artTypeId:"",
                   managerId:"",
                   articleLabel:"",
                   articleContent:"",
                   articleStatus:"",
               },
               modArticle:{
                   articleTitle:"",
                   artTypeId:"",
                   managerId:"",
                   articleLabel:"",
                   articleContent:"",
                   articleStatus:"",
               },

               addRules:{
                    articleTitle:[
                        { required: true , min:1 ,message:"请创建文章标题", trigger:"blur"},
                    ],
                   artTypeId:[
                       { type:'number',required: true , message:"选择文章板块", trigger:"blur"},
                       ],
                    articleContent:[
                        { required: true ,message: '请创建新的文章', trigger: 'blur' },
                    ],
                   articleStatus:[
                       { type:'number',required: true  , message:"请设置可读性" , trigger:"blur"}
                   ]
               },

               modRules:{
                   articleTitle:[
                       { required: true , min:1 ,message:"请创建文章标题", trigger:"blur"},
                   ],
                   artTypeId:[
                       { type:'number',required: true , message:"选择文章板块", trigger:"blur"},
                   ],
                   articleContent:[
                       { required: true ,message: '请创建新的文章', trigger: 'blur' },
                   ],
                   articleStatus:[
                       { type:'number',required: true  , message:"请设置可读性" , trigger:"blur"}
                   ]
               },


               addDialogVisible: false,
               modDialogVisible: false,


           }
           },
        methods:{
            listArticle(){
                this.axios.get(this.$baseUrl+"/article/listAllArticle",{

                    params:{
                        keyword:this.articleTitle,
                        pageNum:this.pageNum,
                        pageSize:this.pageSize
                    }
                }).then((response)=>{
                    this.pageNum = response.data.data.pageNum
                    this.pageSize = response.data.data.pageSize
                    this.pages = response.data.data.total
                    this.articleList = response.data.data.list
                    console.log(this.articleList)


                })
            },
            removeArticleById(id){

                confirm("是否删除？")
                if (confirm){
                    let url=this.$baseUrl+"/article/removeArticle?articleId="+id
                    this.axios.delete(url).then((response)=>{
                        alert(response.data.message)
                        this.listArticle()
                    })
                }


            },
            addFormConfirm(){
                this.axios.post(this.$baseUrl+"/article/addArticle",JSON.stringify(this.addArticle)
                ).then((response)=>{
                    alert(response.data.message)
                    this.addDialogVisible = false
                    this.addArticle = []
                    this.listArticle()
                })
            },

            submitForm() {
                this.$refs.addform.validate((valid) => {
                    if (valid) {
                        alert('添加提交');
                        this.addFormConfirm()
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },

            submitmodForm() {
                this.$refs.modform.validate((valid) => {
                    if (valid) {
                        this.modFormConfirm()
                    } else {
                        return false;
                    }
                });
            },

            showEditDiagoue(row){
                this.modDialogVisible = true
                this.modArticle.articleId = row.articleId
                this.modArticle.articleTitle = row.articleTitle
                this.modArticle.artTypeId = row.artTypeId
                this.modArticle.articleLabel = row.articleLabel
                this.modArticle.articleContent = row.articleContent
                this.modArticle.articleStatus = row.articleStatus

            },
            modFormConfirm(){
                this.axios.put(this.$baseUrl+"/article/updateArticle",JSON.stringify(this.modArticle)
                ).then((response)=>{
                    alert(response.data.message)
                    this.modDialogVisible = false
                    this.listArticle()
                })
            },

            handleSizeChange(newSize) {
                this.pageSize = newSize;
                this.listArticle();
            },
            handleCurrentChange(newPage) {
                this.pageNum = newPage;
                this.listArticle();
            },
            beforeUploadImg(file) {
                const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'
                if (!isJPG) {
                    this.$message.error('上传图片只能是 JPG，PNG, GIF 格式!')
                } else {
                    // 显示loading动画
                    this.quillUpdate = true
                }
                return isJPG
            },
            // 富文本视频上传前
            beforeUploadVideo(file) {
                const isVideo = file.type === 'video/mp4'
                if (!isVideo) {
                    this.$message.error('上传视频只能是 mp4 格式!')
                } else {
                    // 显示loading动画
                    this.quillUpdate = true
                }
                return isVideo
            },
            // 上传成功
            uploadImgSuccess(res, file) {
                console.log(res)
                console.log(file)
                // res为图片服务器返回的数据
                // 获取富文本组件实例
                const quill = this.$refs.myQuillEditor.quill
                // 如果上传成功
                if (res.code == '200' && res.data.url != null) {
                    // 获取光标所在位置
                    const length = quill.getSelection().index
                    // 插入图片  res.info为服务器返回的图片地址
                    quill.insertEmbed(length, 'image', res.data.url)
                    // 调整光标到最后
                    quill.setSelection(length + 1)
                } else {
                    this.$message.error('图片插入失败')
                }
                // loading动画消失
                this.quillUpdate = false
            },
            uploadVideoSuccess(res, file) {
                // res为图片服务器返回的数据
                // 获取富文本组件实例
                const quill = this.$refs.myQuillEditor.quill
                // 如果上传成功
                if (res.code == '200' && res.data.url != null) {
                    // 获取光标所在位置
                    const length = quill.getSelection().index
                    // 插入图片  res.info为服务器返回的图片地址
                    quill.insertEmbed(length, 'video', res.data.url)
                    // 调整光标到最后
                    quill.setSelection(length + 1)
                } else {
                    this.$message.error('视频插入失败')
                }
                // loading动画消失
                this.quillUpdate = false
            },
            // 上传失败
            uploadImgError() {
                // loading动画消失
                this.quillUpdate = false
                this.$message.error('图片插入失败')
            },
            uploadVideoError() {
                // loading动画消失
                this.quillUpdate = false
                this.$message.error('视频插入失败')
            },
            handleClose(){
                this.$confirm('确认关闭？')
                    .then(_ => {
                        this.modDialogVisible = false
                        this.addDialogVisible = false
                    })
                    .catch(_ => {});
            },
            load(){},
        },

        created(){
            this.listArticle()
        },

    }
</script>

<style scoped>
    .avatar-uploader-img {
        height: 0;
    }
    .avatar-uploader-video {
        height: 0;
    }
    /deep/ .ql-snow .ql-tooltip[data-mode=link]::before {
        content: '请输入链接地址:';
    }
    /deep/ .ql-snow .ql-tooltip.ql-editing .ql-action::after {
        border-right: 0px;
        content: '保存';
        padding-right: 0px;
    }
    /deep/ .ql-snow .ql-tooltip[data-mode=video]::before {
        content: '请输入视频地址:';
    }
    /deep/ .ql-snow .ql-picker.ql-size .ql-picker-label::before,
    /deep/ .ql-snow .ql-picker.ql-size .ql-picker-item::before {
        content: '14px';
    }
    /deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
    /deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
        content: '10px';
    }
    /deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
    /deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
        content: '18px';
    }
    /deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
    /deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
        content: '32px';
    }
    /deep/ .ql-snow .ql-picker.ql-header .ql-picker-label::before,
    /deep/ .ql-snow .ql-picker.ql-header .ql-picker-item::before {
        content: '文本';
    }
    /deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
    /deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
        content: '标题1';
    }
    /deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
    /deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
        content: '标题2';
    }
    /deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
    /deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
        content: '标题3';
    }
    /deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
    /deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
        content: '标题4';
    }
    /deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
    /deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
        content: '标题5';
    }
    /deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
    /deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
        content: '标题6';
    }
    /deep/ .ql-snow .ql-picker.ql-font .ql-picker-label::before,
    /deep/ .ql-snow .ql-picker.ql-font .ql-picker-item::before {
        content: '标准字体';
    }
    /deep/ .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
    /deep/ .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
        content: '衬线字体';
    }
    /deep/ .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
    /deep/ .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
        content: '等宽字体';
    }
</style>